<template>
	<view class="bindgift-content">
		<yk-header :title="title" @headBtn="headBtn()" @closePage="closePage()"></yk-header>
		<!-- <view class="go-company-change" @tap="goChange($event)">
			<view>所属公司</view>
			<view>{{companyName?companyName:'请前往选择公司'}}</view>
			<image src="../../static/img/zhanye/jinru-hui.png" mode=""></image>
		</view> -->
		<view class="bind-card">
			<view>卡号</view>
			<input class="bind-card-number" type="number" v-model="cardNum" @input='inputNumber($event)' placeholder="请输入卡号"/>
		</view>
		<view class="bind-card">
			<view>工号</view>
			<input class="bind-card-number" type="text" v-model="jobNum" @input='inputJobNum($event)' placeholder="请输入工号(非必填)"/>
		</view>
		<view class="btn-box">
			<view class="bind-card-btn" @click="entryCard($event)">录入</view>
		</view>
		<view>
			<view class="card-List"
				v-for="(card, index) in bindcardList"
				:key="index"
			>
				<view class="card-number">{{card.cardNumber}} 
					<view :data-cardnum='card.cardNumber' class="release-bind" @click="releaseBind($event)">解绑</view>
				</view>
				<view class="card-time">{{card.createTime}} 录入</view>
			</view>
			<!-- <view class="card-List">
				<view class="card-number">1583446687998</view>
				<view class="card-time">2019.05.10 录入</view>
			</view> -->
		</view>
		
		<view class="loading-text" v-if="bindcardList.length>6||bindcardList.length<1">{{ loadingText }}</view>
	</view>
</template>

<script>
	let page = 1,
		limit = 10;
	export default {
		data() {
			return {
				cardNum:'',
				bindcardList: [],
				loadingText: '加载中...',
				// companyName:'',
				companyId:'',
				title:'绑卡',
				jobNum:''
			};
		},
		onLoad(event) {
			page = 1;
			limit = 10;
			this.customerList = [];
			this.loadingText = '加载中...';
			this.getbindcardList();
			if(event.id){
				// console.log(event.id);
				this.companyId=event.id;
				// this.companyName=event.name;
			}else{
				// this.getCompany();
			}
		},
		onShow() {
			
			
		},
		onReachBottom: function() {
			this.getbindcardList();
		},
		onPullDownRefresh: function() {
			page = 1;
			limit = 10;
			this.customerList = [];
			this.loadingText = '加载中...';
			this.getbindcardList();
		},
		methods: {
			//顶部功能键
			headBtn(e){
				let that=this;
				uni.showActionSheet({
					itemList: ['刷新', '清除缓存'],
					success: function (res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						if(res.tapIndex==0){
							//刷新
							page = 1,
							limit = 10;
							that.customerList = [];
							that.loadingText = '加载中...';
							that.getbindcardList();
						}else{
							//清楚缓存
							uni.showToast({
								title: '清除缓存成功'
							});
							// callNative('onClearH5Cache')
						}
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			//关闭当前页面
			closePage(){
				callNative('navigateBack') 
			},
			//解除绑定
			releaseBind(e){
				console.log(e.currentTarget.dataset.cardnum);
				let that=this;
				try {
					uni.showModal({
						title: '提示',
						content: '您确定要解除绑定吗？',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.request({
									url: that.$usereq + '/coupon-expand/promote/bind/unbound',
									method: 'POST',
									header: {
										'blade-auth': decodeURI(uni.getStorageSync('token')),
										'content-type': 'application/x-www-form-urlencoded'
									},
									data: {
										cardNum:e.currentTarget.dataset.cardnum
									},
									success: res => {
										let datas = res.data;
										console.log(datas);
										
										if(datas.code==200){
											uni.showToast({
												title: '解绑成功',
												icon:'success',
												duration: 2000
											});
											page = 1;
											limit = 10;
											that.GiftcardList = [];
											that.loadingText = '加载中...';
											that.getGiftcardList();0
										}else{
											uni.showToast({
												icon:'none', 
												title: datas.msg,
												duration: 2000
											});
										}
										uni.stopPullDownRefresh();
									}
								});
								
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					// console.log('getbindcardList === ' + uni.getStorageSync('token'));
					
				} catch (e) {
					uni.hideLoading();
					console.log(e.message);
				}
			},
			getbindcardList() {
				try {
					// console.log('getbindcardList === ' + uni.getStorageSync('token'));
					uni.request({
						url: this.$usereq + '/coupon-expand/promote/bind/select/all',
						method: 'GET',
						header: {
							'blade-auth': decodeURI(uni.getStorageSync('token')),
							'content-type': 'application/json'
						},
						data: {
							page: page,
							limit: limit
						},
						success: res => {
							let datas = res.data;
							console.log(datas);
							let newList = datas.data.list;
							if (newList != null && newList != '' && newList.length > 0) {
								this.bindcardList = this.bindcardList.concat(newList);
								if(!(datas.data.list[0].jobNum==-1)){
									this.jobNum=datas.data.list[0].jobNum
								}
								page++;
								if (newList.length <= 9) {
									this.loadingText = '没有更多了';
								}
							} else {
								this.loadingText = '没有更多了';
							}
							uni.stopPullDownRefresh();
						}
					});
				} catch (e) {
					uni.hideLoading();
					this.loadingText = '没有更多了';
					console.log(e.message);
				}
			},
			getCompany() {
				try {
					uni.request({
						url: this.$usereq + '/coupon-expand/promote/bind/sale/company',
						method: 'GET',
						header: {
							'blade-auth': decodeURI(uni.getStorageSync('token')),
							'content-type': 'application/json'
						},
						data: {},
						success: res => {
							let datas = res.data;
							console.log(datas);
							if(datas.msg!="暂无承载数据"){
								this.companyId=datas.data.id;
								this.companyName=datas.data.name;
							}
						}
					});
				} catch (e) {
					console.log(e.message);
				} 
			},
			goChange(e){
				h5NavigateTo({
					url: 'companyChange'
				});
			},
			inputNumber(event){
				// event.detail = {value: value};
				console.log(event.detail);
				this.cardNum=event.detail.value;
			},
			inputJobNum(event){
				console.log(event.detail);
				this.jobNum=event.detail.value;
			},
			entryCard(){
				try {
					console.log(this.cardNum);
					console.log("token==="+uni.getStorageSync('token'));
					uni.request({
						url: this.$usereq + '/coupon-expand/promote/bind/one',
						method: 'POST',
						header: {
							'blade-auth': decodeURI(uni.getStorageSync('token')),
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							cardNum:this.cardNum,
							jobNum:this.jobNum
						},
						success: res => {
							let datas = res.data;
							console.log(datas);
							if(datas.code==200){
								uni.showToast({
									title: '录入成功',
									icon:'success',
									duration: 2000
								});
								page = 1;
								limit = 10;
								this.customerList = [];
								this.bindcardList = [];
								this.loadingText = '加载中...';
								this.getbindcardList();
							}else{
								uni.showToast({
									icon:'none', 
									title: datas.msg,
									duration: 2000
								});
							}
							uni.stopPullDownRefresh();
						}
					});
				} catch (e) {
					uni.hideLoading();
					this.loadingText = '没有更多了'; 
					console.log(e.message);
				}
			}
		}
	};
</script>

<style lang="scss">
	page{
		font-size: 30px;
	}
	.bindgift-content{
		font-size: 30px;
	}
	.bind-card{
		height: 120px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items:center ;
		padding: 0 20px;
		box-sizing: border-box;
		border-bottom: 1px solid  #f3f3f3;
		view:nth-child(1){
			width: 160px;
		}
		.bind-card-number{
			width: 530px;
			height: 94px;
			line-height: 94px;
		}
	}
	.btn-box{
		border-bottom: 20px solid rgba(243,243,243,1);
		padding: 150px 208px 100px 208px;
		.bind-card-btn{
			width: 345px;
			height: 94px;
			margin: 0 auto;
			line-height: 94px;
			text-align: center;
			color: #fff;
			background: #0096FF;
			border-radius:10px;
		}
	}
	.card-List{
		width: 100%;
		padding: 20px;
		height: 150px;
		// padding: 20px
		// line-height: 150px;
		box-sizing: border-box;
		// display: flex;
		// flex-direction: row;
		// justify-content: space-between;
		border-bottom: 1px solid  #f3f3f3;
		.card-number{
			height: 60px;
			line-height: 60px;
			color: #0096FF;
			font-weight: 600;
			view{
				margin-top: 25px;
				margin-right: 10px;
				float: right;
				color: #0096FF;
				width: 120px;
				text-align: center;
			}
		}
		.card-time{
			height: 50px;
			line-height: 50px;
			color:rgba(137,137,137,1);
			font-size: 24px;
		}
	}
	.loading-text {
		// width: 700px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60px;
		line-height: 60px;
		color: #979797;
		font-size: 24px;
	}
	.go-company-change{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items:center ;
		height: 120px;
		padding: 0 20px;
		box-sizing: border-box;
		border-bottom: 1px solid #f3f3f3;
		view:nth-child(1){
			width: 160px;
		}
		view:nth-child(2){
			width: 532px
		}
		image{
			width: 18px;
			height: 33px;
		}
	}
</style>
